<template>
  <div class="box">
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div class="echarts_title">───&nbsp;&nbsp;&nbsp;&nbsp;职业发布统计&nbsp;&nbsp;&nbsp;&nbsp;───</div>
        <div class="echarts_main">
          <div id="zhiyeMap"></div>
        </div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div class="echarts_title">───&nbsp;&nbsp;&nbsp;&nbsp;求职人员统计&nbsp;&nbsp;&nbsp;&nbsp;───</div>
        <div class="echarts_main">
          <div id="qiuzhiMap"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let echarts = require("echarts");
  import taskApi from "../../requestApi/taskApi";
  import dateModel from "../../components/Module/dateModel";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {
      dateModel
    },
    data() {
      return {
        Query: {
          time: 2018
        },
        qiuzhiLists: [],
        qiuzhiXLists: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12"
        ],
        zhiyeLists: []
      };
    },
    created: function () {},
    mounted() {
      let self = this;
      // let u = navigator.userAgent;
      // let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      // if (isAndroid) {
      //   if (window.BenchJSInterface) {
      //     if (window.BenchJSInterface.setRightImage) {
      //       // 0 不设置右上角  1 选择年  2 选择组织机构
      //       // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //       // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      //       let obj = {
      //         clickType: 1,
      //       };
      //       window.BenchJSInterface.setRightImage(
      //         JSON.stringify(obj),
      //         `javascript:window.getAppRightgangweishujutongji(->path<-);`
      //       );
      //     }
      //   }
      // }
      if (window.BenchJSInterface) {
        if (window.BenchJSInterface.setRightImage) {
          // 0 不设置右上角  1 选择年  2 选择组织机构
          // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
          // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
          let obj = {
            clickType: 1,
          };
          window.BenchJSInterface.setRightImage(
            JSON.stringify(obj),
            `javascript:window.getAppRightgangweishujutongji(->path<-);`
          );
        }
      }
      window.getAppRightgangweishujutongji = function (val) {
        self.Query.time = val
        self.listFun();
      };
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listFun();
      };
      this.titleFun({
        title: "岗位数据统计"
      });
    },
    methods: {
      zhjiyemapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(document.getElementById("zhiyeMap"));
        eComVisitChart.setOption({
          xAxis: {
            name: "(月)",
            color: "#2A70DA",
            type: "category",
            data: self.qiuzhiXLists,
            boundaryGap: false,
            axisLabel: {
              interval: 0,
              rotate: -50
            },
            nameTextStyle: {
              // 坐标轴名称样式
              color: "#000",
              padding: [5, 0, 0, -5]
            },
            axisLine: {
              name: "月",
              // 坐标轴 轴线
              show: true, // 是否显示
              symbol: ["none", "arrow"], // 是否显示轴线箭头
              symbolSize: [8, 8], // 箭头大小
              symbolOffset: [0, 7], // 箭头位置
              // ------   线 ---------
              lineStyle: {
                color: "#2A70DA",
                width: 1,
                type: "solid"
              }
            }
          },
          yAxis: {
            name: "(职位数)",
            type: "value"
          },
          series: [{
            itemStyle: {
              normal: {
                color: "#FF9600",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            silent: true,
            data: self.zhiyeLists,
            type: "line"
          }]
        });
      },
      qiuzhimapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(document.getElementById("qiuzhiMap"));
        eComVisitChart.setOption({
          xAxis: {
            name: "(月)",
            color: "#2A70DA",
            type: "category",
            data: self.qiuzhiXLists,
            boundaryGap: false,
            axisLabel: {
              interval: 0,
              rotate: -50
            },
            nameTextStyle: {
              // 坐标轴名称样式
              color: "#000",
              padding: [5, 0, 0, -5]
            },
            axisLine: {
              name: "月",
              // 坐标轴 轴线
              show: true, // 是否显示
              symbol: ["none", "arrow"], // 是否显示轴线箭头
              symbolSize: [8, 8], // 箭头大小
              symbolOffset: [0, 7], // 箭头位置
              // ------   线 ---------
              lineStyle: {
                color: "#2A70DA",
                width: 1,
                type: "solid"
              }
            }
          },
          yAxis: {
            name: "(求职人数)",
            type: "value"
          },
          series: [{
            itemStyle: {
              normal: {
                color: "#40CE65",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            // silent: true,
            data: self.qiuzhiLists,
            type: "line"
          }]
        });
      },
      async listFun() {
        let self = this;
        let params = {
          ...this.Query
        };
        let res = await taskApi.GetApistatisticspostjobhuntingstatistics(params);
        if (res.statusCode == 200) {
          let jobHuntingUserlist = [];
          let postList = [];
          for (let index = 1; index < 13; index++) {
            jobHuntingUserlist.push({
              key: index,
              value: 0
            });
            postList.push({
              key: index,
              value: 0
            });
          }
          let jobHuntingUser = res.data.jobHuntingUser;
          jobHuntingUserlist.forEach(e => {
            for (let k in jobHuntingUser) {
              if (e.key == k) {
                e.value = jobHuntingUser[k];
              }
            }
          });
          self.qiuzhiLists = jobHuntingUserlist.map(e => {
            return e.value;
          });
          let post = res.data.post;
          postList.forEach(e => {
            for (let k in post) {
              if (e.key == k) {
                e.value = post[k];
              }
            }
          });
          self.zhiyeLists = postList.map(e => {
            return e.value;
          });
          this.qiuzhimapListsFun();
          this.zhjiyemapListsFun();
        } else {
          this.qiuzhimapListsFun();
          this.zhjiyemapListsFun();
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  .echarts_title {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(163, 163, 163, 1);
  }

  /* 图表 */
  .echarts_main {
    height: 280px;
    width: calc(100% - 0.8rem);
    margin-left: 0.4rem;
    overflow: hidden;
  }

  #main_map {
    width: 100%;
    height: 260px;
    overflow: hidden;
  }

  .box_main_echarts {
    width: 100%;
    height: 369px;
    overflow: hidden;
    position: relative;
  }

  /* 图表 */
  .box_main_bd {
    width: calc(100% - 0.5333rem);
    margin-left: 0.2667rem;
    min-height: 313px;
    overflow: hidden;
    margin-bottom: 0.6667rem;
    margin-top: 0.5333rem;
    background: #fff;
    border: 0.0267rem solid rgba(191, 191, 191, 0.5);
    background-color: #fff;
  }

  .box {
    background-color: #f0f2f4;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background: url("/static/img/党员数据.jpg") no-repeat;
    background-size: 100% auto;
  }

  #qiuzhiMap {
    width: 100%;
    height: 260px;
    overflow: hidden;
  }

  #zhiyeMap {
    width: 100%;
    height: 260px;
    overflow: hidden;
  }

</style>
